<template>
  <div class="box">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/page' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-input
        placeholder="请输入内容"
        v-model="input3"
        class="input-with-select"
        style="width: 20%"
        @change="chang"
      >
      </el-input>
      <el-button class="but" type="primary" @click="dialogFormVisible = true"
        >添加角色</el-button
      >
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <div
                v-for="(item, index) in props.row.children"
                :key="index"
                class="box1"
              >
                <div>
                  <el-tag closable @close="close(props.row, item.id)">
                    {{ item.authName }}
                  </el-tag>
                  <i class="el-icon-caret-right"></i>
                </div>
                <div>
                  <div
                    v-for="(ite, ind) in item.children"
                    :key="ind"
                    class="box2"
                  >
                    <div>
                      <el-tag
                        closable
                        type="success"
                        @close="close(props.row, ite.id)"
                      >
                        {{ ite.authName }}
                      </el-tag>
                      <i class="el-icon-caret-right"></i>
                    </div>
                    <div class="box3">
                      <div v-for="(itee, ien) in ite.children" :key="ien">
                        <el-tag
                          closable
                          type="danger"
                          @close="close(props.row, itee.id)"
                        >
                          {{ itee.authName }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                  <el-divider></el-divider>
                </div>
              </div>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="#" type="index"> </el-table-column>
        <el-table-column label="角色名称" prop="roleName"> </el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
            ></el-button>
            <el-tooltip
              class="item"
              effect="dark"
              content="分配权限"
              placement="top-start"
            >
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-s-tools"
                @click="quan(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input
            v-model="ruleForm.roleName"
            placeholder="输入角色名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="角色描述" prop="roleDesc">
          <el-input
            v-model="ruleForm.roleDesc"
            placeholder="输入角色描述"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addrole('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetrm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑模态框 -->

    <el-dialog title="编辑角色" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="rule"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="rule.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="rule.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >编辑</el-button
        >
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </span>
    </el-dialog>

    <!-- 编辑模态框  -->

    <!-- 权限 -->
    <el-dialog title="分配权限" :visible.sync="dialog" width="30%">
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :default-checked-keys="defKeys"
        :default-expanded-keys="defKeys"
        ref="tree"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 权限 -->
  </div>
</template>

<script>
import {
  role,
  addrol,
  deleterole,
  putrole,
  tree,
  right,
  rights,
} from '@/api/login.js'
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'authName',
      },

      //
      tableData: [],
      dialogFormVisible: false,
      // 编辑模态框
      dialogVisible: false,
      ruleForm: {
        roleName: '',
        roleDesc: '',
      },
      input3: '',
      // 权限
      dialog: false,
      rule: {
        roleName: '',
        roleDesc: '',
        roleId: 0,
      },
      qen_id: 0,
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          {
            min: 0,
            max: 10,
            message: '长度在 6 到 10 个字符',
            trigger: 'blur',
          },
        ],
        roleDesc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' },
          {
            min: 0,
            max: 10,
            message: '长度在 6 到 10 个字符',
            trigger: 'blur',
          },
        ],
      },
      //默认选中
      defKeys: [],
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    getlist() {
      role().then((res) => {
        this.tableData = res.data.data
      })
    },
    addrole(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addrol(this.ruleForm).then((res) => {
            if (res.data.meta.status == 201) {
              this.$message({
                type: 'success',
                message: res.data.meta.msg,
              })
            }
          })
          this.ruleForm = {
            roleName: '',
            roleDesc: '',
          }
          this.dialogFormVisible = false
          this.getlist()
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    resetrm(formName) {
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleterole(id).then((res) => {
            // console.log(res)
            this.$message({
              type: 'success',
              message: res.data.meta.msg,
            })
            this.getlist()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 编辑
    handleEdit(e) {
      // console.log(e)
      this.dialogVisible = true
      this.rule = {
        roleName: e.roleName,
        roleDesc: e.roleDesc,
        roleId: e.id,
      }
    },
    submitForm() {
      putrole(this.rule).then((res) => {
        // console.log(res)
        this.$message({
          type: 'success',
          message: res.data.meta.msg,
        })
        this.getlist()
      })
      this.dialogVisible = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
    },
    chang(e) {
      if (e == '') {
        this.getlist()
      } else {
        let a = this.tableData.filter((item) => {
          return item.roleName.indexOf(this.input3) > -1
        })
        this.tableData = a
      }
    },
    quan(row) {
      this.data = []
      this.dialog = true
      this.qen_id = row.id
      tree().then((res) => {
        this.data = res.data.data
      })
      let arr = []
      function fn(row) {
        if (!row.children) {
          return arr.push(row.id)
        }
        row.children.forEach((item) => fn(item))
      }
      fn(row)
      this.defKeys = arr
    },
    async add() {
      // console.log('全选中的ID', this.$refs.tree.getCheckedKeys())
      // console.log('半选中的ID', this.$refs.tree.getHalfCheckedKeys())
      let a = this.$refs.tree.getCheckedKeys()
      let b = this.$refs.tree.getHalfCheckedKeys()
      let c = [...a, ...b]
      let d = c.join(',')
      let res = await right(this.qen_id, d)
      // console.log(res)
      if (res.data.meta.status == 200) {
        this.$message.success(res.data.meta.msg)
        this.dialog = false
        this.getlist()
      }
    },
    close(e, s) {
      // console.log(e, s)
      rights(e.id, s).then((res) => {
        // console.log(res)
        if (res.data.meta.status == 200) {
          this.$message.success(res.data.meta.msg)
          this.getlist()
        }
      })
    },
  },
  computed: {},
  watch: {},
}
</script>

<style scoped lang="scss">
* {
  // margin: 0;
  // padding: 0;
  box-sizing: border-box;
}
.box {
  padding: 20px;
  .box-card {
    margin-top: 30px;
  }
}
.but {
  margin: 10px;
}
.el-breadcrumb {
  font-size: 20px;
}
.box1 {
  display: flex;
  align-items: center;
  padding-left: 100px;
  .box2 {
    display: flex;
    margin: 20px;
    padding-left: 100px;
    .box3 {
      display: flex;

      padding-left: 100px;
    }
  }
}
.el-tag {
  margin: 0px 4px;
}
.el-form-item {
  margin: 24px 0px;
}
</style>
